<template>
	<div class="page-con">
		<div class="login-wrap">
			<img class="sign-img" src="../../assets/login.png" />
			<div class="right">
				<div class="r-title">登录管理后台</div>
				<el-form>
					<el-form-item style="margin-bottom: 30px;">
						<el-input class="u-input" v-model="username" placeholder="用户名" :prefix-icon="User" />
					</el-form-item>
					<el-form-item>
						<el-input class="u-input" type="password" v-model="password" placeholder="密码"
							:prefix-icon="Unlock" />
					</el-form-item>
					<el-form-item>
						<el-button class="btn-submit" :loading="loading" color="#626aef" size="large" type="primary"
							@click="onLogin">登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="footer-wrap">Powered by 云圈Lite</div>
	</div>
</template>

<script setup>
import { User, Unlock } from '@element-plus/icons-vue';
import http from '@/utils/request';
import { useMainStore } from '../../store';
import md5 from 'js-md5';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

let loading = ref(false);
let username = ref('');
let password = ref('');
let router = useRouter();

//登录方法
function onLogin() {

	loading.value = true;

	let loginForm = {};
	loginForm.username = username.value;
	loginForm.password = md5(password.value);

	http.post('/admin/user/login', loginForm).then(res => {

		if (res.code == 200) {
			const store = useMainStore();
			store.login(res.result);
			router.push('/')
		}

		loading.value = false;
	});
}
</script>

<style>
.el-input__inner {
	border: 0 !important;
	border-bottom: 1px solid #eee !important;
}
</style>
<style lang="scss" scoped="scoped">
.page-con {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
}

.login-wrap {
	display: inline-flex;
	background-color: #fff;
	margin: 0 auto;
	box-shadow: 0 0 10px 8px #eee;
	border-radius: 5px;
	overflow: hidden;

	.sign-img {
		display: inline-block;
		width: 400px;
		height: 400px;
	}

	.right {
		padding: 20px 50px;

		.r-title {
			font-size: 22px;
			margin-bottom: 60px;
			text-align: center;
		}

		.u-input {
			width: 300px;
		}

		.btn-submit {
			width: 100%;
			margin-top: 50px;
		}
	}
}

.footer-wrap {
	position: absolute;
	bottom: 30px;
	color: #999;
}
</style>
